<template>
  <div>
    <el-menu
      class="el-menu-vertical-demo"
      :collapse-transition="false"
      :collapse="isCollapse"
      router="true"
      unique-opened
    >
      <el-sub-menu index="1">
        <template #title>
          <el-icon><PieChart /></el-icon>
          <span>模拟计算</span>
        </template>
        <el-menu-item
          index="/1/S_C"
          @click="
            addTab({
              title: '单一容器', // 页面标题
              route: '/1/S_C', // 路由
              selected: true, // 设置选中状态
            })
          "
        >
          <el-icon><DataBoard /></el-icon>
          <template #title>单一容器</template>
        </el-menu-item>
        <el-menu-item
          index="/1/R_C"
          @click="
            addTab({
              title: '回转分区', // 页面标题
              route: '/1/R_C', // 路由
              selected: true, // 设置选中状态
            })
          "
        >
          <el-icon><Orange /></el-icon>
          <template #title>回转分区</template>
        </el-menu-item>
      </el-sub-menu>

      <el-menu-item
        index="/1/m_l"
        @click="
          addTab({
            title: '模型列表', // 页面标题
            route: '/1/m_l', // 路由
            selected: true, // 设置选中状态
          })
        "
      >
        <el-icon><Memo /></el-icon>
        <template #title>模型列表</template>
      </el-menu-item>
      <el-menu-item
        index="/1/m_a"
        @click="
          addTab({
            title: '添加模型', // 页面标题
            route: '/1/m_a', // 路由
            selected: true, // 设置选中状态
          })
        "
      >
        <el-icon><CirclePlus /></el-icon>
        <template #title>添加模型</template>
      </el-menu-item>
      <el-menu-item
        index="/1/c_h"
        @click="
          addTab({
            title: '计算记录', // 页面标题
            route: '/1/c_h', // 路由
            selected: true, // 设置选中状态
          })
        "
      >
        <el-icon><Clock /></el-icon>
        <template #title>计算记录</template>
      </el-menu-item>
    </el-menu>

    <!--      <el-menu-->
    <!--          class="el-menu-vertical-demo"-->
    <!--          :collapse-transition="false"-->
    <!--          :collapse="isCollapse"-->
    <!--          router="false"-->
    <!--          unique-opened-->
    <!--      >-->
    <!--        <el-menu-item  @click="addTab({-->
    <!--        title: '模拟计算', // 页面标题-->
    <!--        route: '/1/C', // 路由-->
    <!--        selected: true // 设置选中状态-->
    <!--      })">-->
    <!--          <el-icon><Location /></el-icon>-->
    <!--          <template #title>模拟计算</template>-->
    <!--        </el-menu-item>-->
    <!--        <el-menu-item  @click="addTab({-->
    <!--        title: '模型列表', // 页面标题-->
    <!--        route: '/1/m_l', // 路由-->
    <!--        selected: true // 设置选中状态-->
    <!--      })">-->
    <!--          <el-icon><icon-menu /></el-icon>-->
    <!--          <template #title>模型列表</template>-->
    <!--        </el-menu-item>-->
    <!--        <el-menu-item  @click="addTab({-->
    <!--        title: '添加模型', // 页面标题-->
    <!--        route: '/1/m_a', // 路由-->
    <!--        selected: true // 设置选中状态-->
    <!--      })">-->
    <!--          <el-icon><Document /></el-icon>-->
    <!--          <template #title>添加模型</template>-->
    <!--        </el-menu-item>-->
    <!--        <el-menu-item  @click="addTab({-->
    <!--        title: '计算记录', // 页面标题-->
    <!--        route: '/1/c_h', // 路由-->
    <!--        selected: true // 设置选中状态-->
    <!--      })">-->
    <!--          <el-icon><setting /></el-icon>-->
    <!--          <template #title>计算记录</template>-->
    <!--        </el-menu-item>-->
    <!--      </el-menu>-->
  </div>
</template>

<script>
export default {
  props: {
    isCollapse: Boolean,
  },
  data() {
    return {};
  },
  methods: {
    addTab(tab) {
      // this.$router.push(tab.route)
      this.$emit("addtab", tab);
    },
  },
};
</script>
<script setup>
import {
  CirclePlus,
  Memo,
  PieChart,
  Clock,
  DataBoard,
  Orange,
} from "@element-plus/icons-vue";
</script>

<style>
/*去除鼠标光标*/
span {
  caret-color: transparent;
}

li {
  caret-color: transparent;
}

.el-menu--vertical {
  height: 100%;
  position: fixed;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100%;
}

el-radio-group {
  margin-left: 10px;
}
</style>
